<!--项目人员-->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item label="工号" prop="employeeId">
        <el-input
          v-model="queryParams.employeeId"
          placeholder="请输入工号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="身份证号码" prop="idCardNumber">
        <el-input
          v-model="queryParams.idCardNumber"
          placeholder="请输入身份证号码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="集团名称" prop="groupName">
        <el-input
          v-model="queryParams.groupName"
          placeholder="请输入集团名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="公司名称" prop="factoryName">
        <el-input
          v-model="queryParams.factoryName"
          placeholder="请输入公司名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <el-input
          v-model="queryParams.departmentName"
          placeholder="请输入部门"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="科研团队名称" prop="researchTeamName">
        <el-input
          v-model="queryParams.researchTeamName"
          placeholder="请输入科研团队名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['gs:projectStaff:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['gs:projectStaff:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['gs:projectStaff:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['gs:projectStaff:export']"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="info"
            plain
            icon="el-icon-upload2"
            size="mini"
            @click="handleImport"
        >导入</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="projectStaffList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="id" />
      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="英文名" align="center" prop="englishName" />
      <el-table-column label="工号" align="center" prop="employeeId" />
      <el-table-column label="人员类别" align="center" prop="staffCategory">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.gs_project_person_type" :value="scope.row.staffCategory"/>
        </template>
      </el-table-column>
      <el-table-column label="人员类型" align="center" prop="staffType" />
      <el-table-column label="人员状态" align="center" prop="staffStatus" />
      <el-table-column label="专家级别" align="center" prop="expertLevel" />
      <el-table-column label="专家类别" align="center" prop="expertCategory" />
      <el-table-column label="电话" align="center" prop="phone" />
      <el-table-column label="邮箱" align="center" prop="email" />
      <el-table-column label="年龄" align="center" prop="age" />
      <el-table-column label="性别" align="center" prop="gender" />
      <el-table-column label="民族" align="center" prop="ethnicity" />
      <el-table-column label="职务" align="center" prop="position" />
      <el-table-column label="职称" align="center" prop="professionalTitle" />
      <el-table-column label="学位" align="center" prop="degree" />
      <el-table-column label="学历" align="center" prop="education" />
      <el-table-column label="学科方向" align="center" prop="subject" />
      <el-table-column label="学术专长" align="center" prop="academicExpertise" />
      <el-table-column label="承担项目" align="center" prop="undertakenProjects" />
      <el-table-column label="科技成果" align="center" prop="technologicalAchievements" />
      <el-table-column label="专家贡献" align="center" prop="expertContribution" />
      <el-table-column label="参与项目" align="center" prop="participatedProjects" />
      <el-table-column label="获奖情况" align="center" prop="awards" />
      <el-table-column label="评审项目" align="center" prop="reviewedProjects" />
      <el-table-column label="评审意见" align="center" prop="reviewOpinions" />
      <el-table-column label="政治面貌" align="center" prop="politicalStatus" />
      <el-table-column label="籍贯" align="center" prop="nativePlace" />
      <el-table-column label="出生年月" align="center" prop="birthday" width="180"/>
      <el-table-column label="身份证号码" align="center" prop="idCardNumber" />
      <el-table-column label="入职时间" align="center" prop="entryDate" width="180"/>
      <el-table-column label="集团代码" align="center" prop="groupCode" />
      <el-table-column label="集团名称" align="center" prop="groupName" />
      <el-table-column label="公司代码" align="center" prop="factoryCode" />
      <el-table-column label="公司名称" align="center" prop="factoryName" />
      <el-table-column label="部门" align="center" prop="departmentCode" />
      <el-table-column label="部门" align="center" prop="departmentName" />
      <el-table-column label="科研团队类型" align="center" prop="researchTeamType" />
      <el-table-column label="科研团队代码" align="center" prop="researchTeamCode" />
      <el-table-column label="科研团队名称" align="center" prop="researchTeamName" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['gs:projectStaff:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['gs:projectStaff:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改项目人员对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="工号" prop="employeeId">
              <el-input v-model="form.employeeId" placeholder="请输入工号" @change="updatePerson">
                <el-button slot="append" icon="el-icon-search" @click="handleSelectPerson"></el-button>
              </el-input>
            </el-form-item>
            <PersonSelect ref="personSelect" @onSelected="onPersonSelected" ></PersonSelect>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人员类别" prop="staffCategory">
              <el-select v-model="form.staffCategory" placeholder="请选择人员类别" @change="updatePerson">
                <el-option
                  v-for="dict in dict.type.gs_project_person_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="英文名" prop="englishName">
              <el-input v-model="form.englishName" placeholder="请输入英文名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专家级别" prop="expertLevel">
              <el-input v-model="form.expertLevel" placeholder="请输入专家级别" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age" placeholder="请输入年龄" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-input v-model="form.gender" placeholder="请输入性别" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族" prop="ethnicity">
              <el-input v-model="form.ethnicity" placeholder="请输入民族" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务" prop="position">
              <el-input v-model="form.position" placeholder="请输入职务" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职称" prop="professionalTitle">
              <el-input v-model="form.professionalTitle" placeholder="请输入职称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学位" prop="degree">
              <el-input v-model="form.degree" placeholder="请输入学位" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历" prop="education">
              <el-input v-model="form.education" placeholder="请输入学历" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学科方向" prop="subject">
              <el-input v-model="form.subject" placeholder="请输入学科方向" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学术专长" prop="academicExpertise">
              <el-input v-model="form.academicExpertise" placeholder="请输入学术专长" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="承担项目" prop="undertakenProjects">
              <el-input v-model="form.undertakenProjects" placeholder="请输入承担项目" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="科技成果" prop="technologicalAchievements">
              <el-input v-model="form.technologicalAchievements" placeholder="请输入科技成果" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专家贡献" prop="expertContribution">
              <el-input v-model="form.expertContribution" placeholder="请输入专家贡献" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参与项目" prop="participatedProjects">
              <el-input v-model="form.participatedProjects" placeholder="请输入参与项目" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="获奖情况" prop="awards">
              <el-input v-model="form.awards" placeholder="请输入获奖情况" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评审项目" prop="reviewedProjects">
              <el-input v-model="form.reviewedProjects" placeholder="请输入评审项目" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评审意见" prop="reviewOpinions">
              <el-input v-model="form.reviewOpinions" placeholder="请输入评审意见" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯" prop="nativePlace">
              <el-input v-model="form.nativePlace" placeholder="请输入籍贯" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生年月" prop="birthday">
              <el-date-picker clearable
                v-model="form.birthday"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择出生年月">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号码" prop="idCardNumber">
              <el-input v-model="form.idCardNumber" placeholder="请输入身份证号码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入职时间" prop="entryDate">
              <el-date-picker clearable
                v-model="form.entryDate"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择入职时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="集团代码" prop="groupCode">
              <el-input v-model="form.groupCode" placeholder="请输入集团代码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="集团名称" prop="groupName">
              <el-input v-model="form.groupName" placeholder="请输入集团名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司代码" prop="factoryCode">
              <el-input v-model="form.factoryCode" placeholder="请输入公司代码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司名称" prop="factoryName">
              <el-input v-model="form.factoryName" placeholder="请输入公司名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门代码" prop="departmentCode">
              <el-input v-model="form.departmentCode" placeholder="请输入部门" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门名称" prop="departmentName">
              <el-input v-model="form.departmentName" placeholder="请输入部门" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="科研团队代码" prop="researchTeamCode">
              <el-input v-model="form.researchTeamCode" placeholder="请输入科研团队代码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="科研团队名称" prop="researchTeamName">
              <el-input v-model="form.researchTeamName" placeholder="请输入科研团队名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url + '?updateSupport=' + upload.updateSupport"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <!--  <div class="el-upload__tip" slot="tip">
              <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
            </div>-->
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listProjectStaff, getProjectStaff, delProjectStaff, addProjectStaff, updateProjectStaff } from "@/api/gs/projectStaff";
import PersonSelect  from "@/components/personSelect/index";
import {getToken} from "@/utils/auth";
export default {
  name: "ProjectStaff",
  dicts: ['gs_project_person_type'],
  components :{PersonSelect},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 项目人员表格数据
      projectStaffList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        employeeId: null,
        staffType: null,
        idCardNumber: null,
        groupName: null,
        factoryName: null,
        departmentName: null,
        researchTeamType: null,
        researchTeamName: null,
      },
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "导入`projectStaff`信息",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/gs/projectStaff/importData"
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSelectPerson(){
      this.$refs.personSelect.showFlag = true;
    },
    onPersonSelected(obj){
      if(obj != undefined && obj != null){
        console.log(obj)
        this.form.name=obj.pname
        this.form.employeeId=obj.jobNo
        this.form.departmentName=obj.department
      }
    },
    /** 查询项目人员列表 */
    getList() {
      this.loading = true;
      listProjectStaff(this.queryParams).then(response => {
        this.projectStaffList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        englishName: null,
        employeeId: null,
        staffCategory: null,
        staffType: null,
        staffStatus: null,
        expertLevel: null,
        expertCategory: null,
        phone: null,
        email: null,
        age: null,
        gender: null,
        ethnicity: null,
        position: null,
        professionalTitle: null,
        degree: null,
        education: null,
        subject: null,
        academicExpertise: null,
        undertakenProjects: null,
        technologicalAchievements: null,
        expertContribution: null,
        participatedProjects: null,
        awards: null,
        reviewedProjects: null,
        reviewOpinions: null,
        politicalStatus: null,
        nativePlace: null,
        birthday: null,
        idCardNumber: null,
        entryDate: null,
        groupCode: null,
        groupName: null,
        factoryCode: null,
        factoryName: null,
        departmentCode: null,
        departmentName: null,
        researchTeamType: null,
        researchTeamCode: null,
        researchTeamName: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加项目人员";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getProjectStaff(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改项目人员";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateProjectStaff(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addProjectStaff(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除数据？').then(function() {
        return delProjectStaff(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('gs/projectStaff/export', {
        ...this.queryParams
      }, `projectStaff_${new Date().getTime()}.xlsx`)
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "项目人员导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('gs/projectStaff/importTemplate', {
      }, `项目人员模板.xlsx`)
    },
    /** 文件上传中处理 */
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    /** 文件上传成功处理 */
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    /** 提交上传文件 */
    submitFileForm() {
      this.$refs.upload.submit();
    },
  }
};
</script>
